html, body {
  margin: 0;
  padding: 0;
}

.section {
  .section-header {

  }

  .section-content {
    display: flex;
    flex-direction: row;

    .left {
      flex-shrink: 0;
    }

    .main {
      flex-grow: 1;
    }

    .right {
      flex-shrink: 0;
    }
  }

  .section-footer {

  }
}

.v-home {
  * {
    box-sizing: border-box;
  }

  font-size: 12px;
  color: #000000;

  p {
    font-size: 2vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 3vw;
    letter-spacing: 0;
    color: #000000;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .p1.banner {
    height: 40vw;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 12vw;

    .title {
      font-weight: bold;
      color: #2cacab;

      .line-1 {
        .line-1-1 {
          font-size: 100px;
          line-height: 70px;
        }

        .line-1-2 {
          font-size: 60px;
          line-height: 70px;
        }
      }

      .line-2 {
        margin: 1vw 0 1vw;
        font-size: 60px;
        line-height: 70px;
        color: #ffffff;
        box-shadow: 0px 3px 2px 0px rgba(47, 89, 89, 0.35);
        width: 23vw;
        height: 4vw;
        background-color: #2eaead;
        opacity: 0.7;
      }

      .line-3 {
        font-size: 60px;
        line-height: 78px;
        color: #4e4e4e;
      }
    }
  }

  .p2.projects {
    .h {
      background-color: #1bb89d;
      height: 7vw;
      display: flex;
      padding: 0 20vw;
      align-items: center;

      .title {
        width: 38vw;
        height: 4.5vw;
        line-height: 4.5vw;
        background-color: #33bea7;
        border: solid 1px #6ad1c0;
        font-size: 1.56vw;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
      }

      .op {
        background: #fff;

        a {
          padding: 0 5vw;
          text-decoration: underline;
          font-size: 1.25vw;
          color: #1bb89d;
        }
      }
    }

    .c {
      height: 28vw;
      padding: 7vw 22vw 4vw;
      display: flex;
      justify-content: space-between;

      .box {
        width: 12vw;
        background-color: #ffffff;
        box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.06), inset 0px 3px 0px 0px rgba(0, 0, 0, 0.03);
        border-radius: 20px;

        .image-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 7vw;
          margin-top: 3vw;

          img {
            width: 6vw;
            height: 100%;
            background-color: #38a2b4;
            box-shadow: inset 0vw 0vw 4vw 0vw rgba(0, 0, 0, 0.14);
          }
        }

        .box-c {
          padding: 1.5vw 1vw;
          text-align: center;

          .en-title {
            font-size: 0.73vw;
            letter-spacing: -0.04vw;
            color: #38a2b4;
          }

          .cn-title {
            font-size: 0.94vw;
          }

          .btn-wrapper {
            padding: 0.2vw 1vw;
            margin: .5vw 1vw;
            display: inline-block;
            border-radius: 0.67vw;

            a {
              font-size: 0.63vw;
              color: #3a99a9;
            }

            &:hover {
              background-color: #38a2b4;

              a {
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }

  .p3.standard {
    display: flex;
    padding: 2vw 0;

    .image-wrapper {
      flex-shrink: 0;
      width: 41vw;
      height: 36vw;
      background-image: linear-gradient(-90deg,
              #2babaa 0%,
              #4799bf 100%);
    }

    .m {
      padding: 0 12vw 0 2vw;

      .h {
        padding: 4vw 0;
        width: 15vw;
        font-weight: bold;
        height: 3vw;
        font-size: 3vw;
        line-height: 1vw;
      }

      .c {

      }
    }
  }

  .p4.honor {

    .h {
      text-align: center;
      padding: 4vw 0;
      font-weight: bold;
      font-size: 3vw;
    }

    .c {
      display: flex;
      justify-content: space-between;
      padding: 0 12vw;

      .box {
        width: 22vw;
        height: 29vw;
        background-color: #ffffff;

        .image-wrapper {
          width: 22vw;
          height: 20vw;
          background-color: #ffffff;
        }

        .box-c {
          text-align: center;
          font-weight: bold;
          padding: 2vw 0 3vw 0;
          font-size: 1vw;
          line-height: 1vw;
        }
      }
    }
  }


  .p5.technology {

    .h {
      text-align: center;
      padding: 4vw 0;
      font-weight: bold;
      font-size: 3vw;
    }

    .c {
      display: flex;
      justify-content: space-between;
      padding: 0 12vw;

      .box {
        width: 22vw;
        background-color: #ffffff;

        .image-wrapper {
          img {
            width: 5vw;
            height: 5vw;
            border-radius: 5vw;
          }
        }

        .box-c {
          padding: 2vw 0 3vw 0;
          font-size: 1vw;

          strong {
            margin: 2vw 0 1vw;
          }

          p {
            font-size: 1vw;
            line-height: inherit;
          }
        }
      }
    }
  }
}


.header {
  height: 78px;
  background: #ccc;
}

.footer {
  height: 78px;
  background: #ccc;
}